<template>
  <!--  @mouseover="recalculate" @click="recalculate" @keyup="recalculate"  -->
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'App',
  computed: {
    ...mapState({
      screenWidth: state => state.app.screenWidth,
      sidebarBgColor: state => state.app.sidebarBgColor,
      tableBgColor: state => state.app.tableBgColor,
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  data() {
    return {
      currentTime: '',
      lastTime: '',
      timeOut: 60000,//3600000
      time: '',
      color:[
        { color1: "#a8071a", color2: "#cf1322", color3: "#f5222d", color4: "#fff1f0", color5: "#FFF9F8", name: 'red' },
        { color1: "#ad6800", color2: "#faad14", color3: "#ffc53d", color4: "#fffbe6", color5: "#FFFDF6", name: 'gold' },
        { color1: "#3f6600", color2: "#7cb305", color3: "#a0d911", color4: "#fcffe6", color5: "#FEFFF6", name: 'green' },
        { color1: "#22075e", color2: "#531dab", color3: "#b37feb", color4: "#f9f0ff", color5: "#FDFBFF", name: 'purple' },
        { color1: "#0367CA", color2: "#0180FD", color3: "#1E90FF", color4: "#e6f7ff", color5: "#F6FCFF", name: 'blue' },
        { color1: "#4b7cc5", color2: "#4D8DEC", color3: "#90B8F3", color4: "#E9F1FD", color5: "#F1F6FE", name: 'ice' },
        { color1: "#1f8c98", color2: "#57bebb", color3: "#34cac6", color4: "#dafcfb", color5: "#e9fefd", name: 'spring' },
      ],
      list: [
        // {min: 1509430400000, max: 1609516800000, normalBg: "#820014", lightBg: "#cf1322", hoverBg: "#f5222d", lBg: "#ffccc7", lbBg: "#fff1f0"},
        // {min: 1609430400000, max: 1609516800000, name: 'red' },
        { min: 1609776000000, max: 1609862400000, name: 'ice' },
        { min: 1611072000000, max: 1611158400000, name: 'red' },
        { min: 1612368000000, max: 1612454400000, name: 'gold' },
        { min: 1612281600000, max: 1612368000000, name: 'spring' },
        { min: 1612972800000, max: 1613059200000, name: 'red' },//除夕
        { min: 1613059200000, max: 1613145600000, name: 'red' },
        { min: 1613145600000, max: 1613232000000, name: 'red' },
        { min: 1613232000000, max: 1613318400000, name: 'red' },
        { min: 1613318400000, max: 1613404800000, name: 'red' },
        { min: 1613404800000, max: 1613491200000, name: 'red' },
        { min: 1613491200000, max: 1613577600000, name: 'red' },
        { min: 1613577600000, max: 1613664000000, name: 'red' },
        { min: 1613664000000, max: 1613750400000, name: 'red' },
      ],
      theme: {
        normalBg: "#0367CA",  //sidbar背景
        lightBg: "#0180FD",   //高亮色
        hoverBg: "#1E90FF",   //hover背景色
        lBg: "#E1F5FE",       //option背景色
        lbBg: "#F2FBFF",      //表头背景色
        name: '默认色'
      },//默认主题
      themeType: '',//主题类型： time--节日主题   default--默认主题
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.$store.dispatch('app/setScreenWidth', window.innerWidth)
      })()
    }
    document.body.style.setProperty("--primary", "#0367CA");
    document.body.style.setProperty("--primaryActive", "#0180FD");
    document.body.style.setProperty("--primaryHover", "#1E90FF");
    document.body.style.setProperty("--primaryHoverBg", "#F2FBFF");
    document.body.style.setProperty("--success", "#25C547");
    document.body.style.setProperty("--successActive", "#25C540");
    document.body.style.setProperty("--successHover", "#6EDC91");
    document.body.style.setProperty("--successHoverBg", "#E8F9EB");
    document.body.style.setProperty("--warning", "#FCA00C");
    document.body.style.setProperty("--warningActive", "#F19B1A");
    document.body.style.setProperty("--warningHoverBg", "#F9F5EF");
    document.body.style.setProperty("--info", "#CACACA");
    document.body.style.setProperty("--infoActive", "#C0C0C0");
    document.body.style.setProperty("--infoHoverBg", "#F8F8F8");
    document.body.style.setProperty("--danger", "#cf1322");
    document.body.style.setProperty("--dangerActive", "#f5222d");
    document.body.style.setProperty("--dangerHoverBg", "#FCEBEB");
    if(localStorage.getItem('theme')){
      this.setTheme(JSON.parse(localStorage.getItem('theme')))
    }
    this.getTheme();
  },
  methods: {
    getTheme() {
      let _this = this;
      let current = new Date().getTime();
      //节日主题优先级最高，所以先check当前时间是否在节日时间内
      for (let item of this.list) {
        if (item.min < current && item.max > current) {
          this.themeType = 'time';
          let obj = {};
          this.color.map( ooo =>{
            if(item.name==ooo.name){
              obj = ooo
            }
          })
          console.log(obj)
          this.theme = {
            normalBg: obj.color1,
            lightBg: obj.color2,
            hoverBg: obj.color3,
            lbBg: obj.color4,
            lBg: obj.color5,
            name: 'time'
          }
          break;
        }
      }

      if(this.themeType == 'time'){
        localStorage.setItem('theme',JSON.stringify(this.theme));
        this.$store.dispatch('app/setSidebarBgColor', this.theme.normalBg);
        this.$store.dispatch('app/setTableBgColor', this.theme.lBg);
        this.setTheme(this.theme)
      }
      //当前时间处在非节日节点期间
      if (this.themeType != 'time') {
        let theme = localStorage.getItem('theme');
        //已获取浏览器主题
        if (theme&&theme!='null') {
          this.theme = JSON.parse(theme);
          this.$store.dispatch('app/setSidebarBgColor', this.theme.normalBg);
          this.$store.dispatch('app/setTableBgColor', this.theme.lBg);
          this.setTheme(this.theme)
        }
        //未获取到浏览器主题
        else {
          let item = {normalBg: "#0367CA", lightBg: "#0180FD", hoverBg: "#1E90FF", lBg: "#E1F5FE", lbBg: "#F2FBFF", name: '默认色'}
          localStorage.setItem('theme', JSON.stringify(item))//默认主题
          this.$store.dispatch('app/setSidebarBgColor', "#0367CA");
          this.$store.dispatch('app/setTableBgColor', "#E1F5FE");
          this.setTheme(item)
        }
      }
    },
    setTheme(item){
      document.body.style.setProperty("--normalBg", item.normalBg);
      document.body.style.setProperty("--lightBg", item.lightBg);
      document.body.style.setProperty("--hoverBg", item.hoverBg);
      document.body.style.setProperty("--lbBg", item.lbBg);
      document.body.style.setProperty("--lBg", item.lBg);
      document.body.style.setProperty("--primary", item.normalBg);
      document.body.style.setProperty("--primaryActive", item.lightBg);
      document.body.style.setProperty("--primaryHover", item.hoverBg);
      document.body.style.setProperty("--primaryHoverBg", item.lbBg);
    }
  }
}
</script>
<style lang="scss">

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

/*表格模板样式*/
.row-header {
  height: auto;
  padding: 20px 0;
}

.row-form-btn {
  text-align: right;
  padding-right: 20px;
}

.split-line {
  width: 100%;
  height: 10px;
  background: #fafafa;
  //background: $--color-primary;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

.row-main {
  width: 100%;
  height: auto;
  padding: 20px 10px;
}

.row-main-table {
  text-align: center;
  margin: 20px 0;
}

.row-main-pager {
  text-align: right;
  margin-right: 10px;
}

/*移动/联通/电信选项按钮*/
/*首航按钮列表*/
.row-btn-block {
  width: 800px;
  height: 40px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 20px;
}

.row-btn-block-item {
  width: auto;
  height: 32px;
  padding: 0 20px;
  border: 1.5px solid #dcdfe6;
  background: #fff;
  color: #606266;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: transform 0.28s ease;
  font-weight: 600;
  font-size: 14px;
  border-radius: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  letter-spacing: 1px;
}

.row-btn-block-item img {
  margin-right: 5px;
}

/*.icon-color1{
  color: #F4943C;
  border: 1.5px solid #F4943C;
}
.icon-color2{
  color: #13227a;
  border: 1.5px solid #13227a;
}
.icon-color3{
  color: #1C74FC;
  border: 1.5px solid #1C74FC;
}
.icon-color4{
  color: #AC1C34;
  border: 1.5px solid #AC1C34;
}*/
/*下拉按钮样式*/
.operation {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: 0;
  outline: none;
  display: block;
  text-align: center;
  margin: 0;
  padding: 0 17px;

}

.operation:hover {
  background: var(--lbBg) !important;
  color: var(--lightBg) !important;
}

.copy-icon {
  margin-left: 5px;
  color: var(--lightBg) !important;
}
</style>
